<template>
  <iBizControlBase :controller="c">
    <template v-if="c.state.isCreated || true">
      <uni-list v-if="c.state.rows.length > 0">
        <template v-if="c.model.groupMode !== 'NONE'">
          <view v-for="(group, index) in c.state.groups" :key="index" :title="group.caption">
            <view :class="ns.b('group-caption')">{{ group.caption }}</view>
            <template v-if="leftSlidingActionGroup || rightSlidingActionGroup">
              TODO 滑动单元格暂未支持
            </template>
            <template v-else>
              <!-- 绘制项 -->
              <IBizControlShell
                v-if="c.model.itemLayoutPanel"
                :data="group.data"
                :modelData="c.model.itemLayoutPanel"
                :context="c.context"
                :params="c.params"
                @click="() => c.onRowClick(group.data)"
              ></IBizControlShell>
              <uni-list-item
                v-else
                :class="calcItemClass(group.data)"
                :title="group.data.srfmajortext || ''"
                showArrow
                :@click="() => c.onRowClick(group.data)"
              >
                <image
                  v-if="Object.prototype.hasOwnProperty.call(group.data, 'image')"
                  :class="ns.b('image')"
                  :src="group.data.image"
                  alt=""
                ></image>
                <radio :class="ns.bm('item', 'right')" :checked="isSelect(group.data)" />
              </uni-list-item>
            </template>
          </view>
        </template>
        <template v-else>
          <template v-for="(item, index) in c.state.rows" :key="index">
            <!-- TODO 滑动单元格暂未支持 -->
            <!-- 绘制项 -->
            <IBizControlShell
              v-if="c.model.itemLayoutPanel"
              :data="item"
              :modelData="c.model.itemLayoutPanel"
              :context="c.context"
              :params="c.params"
              @click="() => c.onRowClick(item)"
            ></IBizControlShell>
            <uni-list-item
              v-else
              :class="calcItemClass(item)"
              :title="item.srfmajortext || ''"
              showArrow
              @click="() => c.onRowClick(item)"
            >
              测试
              <image
                v-if="Object.prototype.hasOwnProperty.call(item, 'image')"
                :class="ns.b('image')"
                :src="item.image"
                alt=""
              ></image>
              <radio :class="ns.bm('item', 'right')" :checked="isSelect(item)" />
            </uni-list-item>
          </template>
        </template>
      </uni-list>
    </template>
    <template v-else>
      <iBizNoData
        v-if="c.state.isLoaded"
        :text="c.model.emptyText"
        :emptyTextLanguageRes="c.model.emptyTextLanguageRes"
      ></iBizNoData>
    </template>
  </iBizControlBase>
</template>
<script setup lang="ts">
import { IDEMobMDCtrl } from '@ibiz/model-core'
import { useControlController, useNamespace } from '@/use'
import { MDCtrlController } from '@ibiz-template/runtime'
const props = defineProps({
  modelData: { type: Object as PropType<IDEMobMDCtrl>, required: true },
  context: { type: Object as PropType<IContext>, required: true },
  params: { type: Object as PropType<IParams>, default: () => ({}) },
  /**
   * 部件行数据默认激活模式
   * - 0 不激活
   * - 1 单击激活
   * - 2 双击激活(默认值)
   *
   * @type {(number | 0 | 1 | 2)}
   */
  mdctrlActiveMode: { type: Number, default: 1 },

  /**
   * 是否为单选
   * - true 单选
   * - false 多选
   *
   * @type {(Boolean)}
   */
  singleSelect: { type: Boolean, default: true },
  selectedData: { type: Object as PropType<IData[]>, required: false },
  mode: { type: String, default: 'LIST' },
  loadMode: { type: String, default: 'auto' },
  loadDefault: { type: Boolean, default: true },
})

const c = useControlController((...args) => new MDCtrlController(...args))
const ns = useNamespace(`control-${c.model.controlType!.toLowerCase()}`)
// 左滑界面行为组
const leftSlidingActionGroup = c.model.deuiactionGroup
// 右滑界面行为组
const rightSlidingActionGroup = c.model.deuiactionGroup2

const isSelect = (row: IData) => {
  const findIndex = c.state.selectedData.findIndex((data) => {
    return data.srfkey === row.srfkey
  })
  return findIndex !== -1
}
const calcItemClass = (row: IData) => {
  const select = isSelect(row)
  const itemClass = [ns.b('item'), ns.is('active', select)]
  return itemClass
}
console.log('md-ctrl-c', c)
</script>
<style lang="scss">
@import './i-biz-md-ctrl-control';
</style>
